class Heatmap {
  constructor(map) {
    this.map = map;
    this.colorRampList = [
      {
        name: 'Classical',
        ramp: [
          'rgb(103,169,207)',
          'rgb(209,229,240)',
          'rgb(253,219,199)',
          'rgb(239,138,98)',
          'rgb(178,24,43)',
        ],
      },
      {
        name: 'Yellow-Red',
        ramp: [
          'rgb(255,255,255)',
          'rgb(255,255,224)',
          'rgb(255,255,0)',
          'rgb(255,165,0)',
          'rgb(255,0,0)',
        ],
      },
      {
        name: 'Yellow-Orange-Red',
        ramp: [
          'rgb(255,255,0)',
          'rgb(255,215,0)',
          'rgb(255,165,0)',
          'rgb(255,69,0)',
          'rgb(255,0,0)',
        ],
      },
      {
        name: 'Yellow-Red-Purple',
        ramp: [
          'rgb(255,255,0)',
          'rgb(255,165,0)',
          'rgb(255,69,0)',
          'rgb(255,0,0)',
          'rgb(128,0,128)',
        ],
      },
      {
        name: 'Yellow-Green-Blue',
        ramp: [
          'rgb(255,255,0)',
          'rgb(173,255,47)',
          'rgb(0,255,0)',
          'rgb(0,255,255)',
          'rgb(0,0,255)',
        ],
      },
      {
        name: 'Red-Yellow-Green',
        ramp: [
          'rgb(255,0,0)',
          'rgb(255,69,0)',
          'rgb(255,255,0)',
          'rgb(173,255,47)',
          'rgb(0,255,0)',
        ],
      },
    ];
  }
  heatMapRender(options) {
    const {
      sourceLayer,
      mode,
      weightField,
      maxFieldVal,
      colorRamp,
      layerOptions,
      mapLayer,
      basedZoomOptions,
    } = options;
    const layout = layerOptions.layout;
    const paint = layerOptions.paint;
    if (this.map.getLayer(`${sourceLayer}_heatmap`) !== undefined) {
      return {
        status: 'error',
        message:
          '已存在该点图层的热力图层，暂不支持对同一点图层添加多个热力图层！',
      };
    }
    // 找到色带
    const colorRampArr = this.colorRampList.find(
      (item) => item.name === colorRamp,
    ).ramp;

    if (mode === 'global') {
      Object.assign(paint, {
        'heatmap-color': [
          'interpolate',
          ['linear'],
          ['heatmap-density'],
          0,
          'rgba(33,102,172,0)',
          0.2,
          colorRampArr[0],
          0.4,
          colorRampArr[1],
          0.6,
          colorRampArr[2],
          0.8,
          colorRampArr[3],
          1,
          colorRampArr[4],
        ],
      });
      mapLayer.layerConfig.paint = paint;
    } else {
      const {
        interpolateMethod,
        zoomRange,
        weightRange,
        intensityRange,
        radiusRange,
        opacityRange,
      } = basedZoomOptions;
      const weight = [];
      const insentity = [];
      const radius = [];
      const opacity = [];
      weight.push(
        'interpolate',
        [`${interpolateMethod}`],
        ['get', `${weightField}`],
        0,
        weightRange[0],
        maxFieldVal,
        weightRange[1],
      );
      insentity.push(
        'interpolate',
        [`${interpolateMethod}`],
        ['zoom'],
        0,
        intensityRange[0],
        zoomRange[1],
        intensityRange[1],
      );
      radius.push(
        'interpolate',
        [`${interpolateMethod}`],
        ['zoom'],
        0,
        radiusRange[0],
        zoomRange[1],
        radiusRange[1],
      );
      opacity.push(
        'interpolate',
        [`${interpolateMethod}`],
        ['zoom'],
        0,
        opacityRange[0],
        zoomRange[1],
        opacityRange[1],
      );
      mapLayer.layerConfig.paint = {
        'heatmap-weight': weight,
        'heatmap-intensity': insentity,
        'heatmap-radius': radius,
        'heatmap-opacity': opacity,
      };
    }
    Object.assign(mapLayer.layerConfig.paint, {
      'heatmap-color': [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0,
        'rgba(33,102,172,0)',
        0.2,
        colorRampArr[0],
        0.4,
        colorRampArr[1],
        0.6,
        colorRampArr[2],
        0.8,
        colorRampArr[3],
        1,
        colorRampArr[4],
      ],
    });
    mapLayer.layerConfig.layout = layout;
    // console.log(mapLayer.layerConfig);
    return {
      status: 'success',
      message: '热力图层添加成功!',
      data: mapLayer,
    };
  }
  heatMapRender2(options) {
    // console.log(options)
    const {
      weightField,
      maxFieldVal,
      colorRamp,
      layerOptions,
      basedZoomOptions,
      'heatmap-weight': weight,
      mapLayer,
    } = options;
    // if (this.map.getLayer(sourceLayer + '_heatmap') !== undefined) {
    //   return {
    //     status: 'error',
    //     message: '已存在该点图层的热力图层，暂不支持对同一点图层添加多个热力图层！'
    //   }
    // }
    const layout = layerOptions.layout;
    const paint = layerOptions.paint;
    const colorRampArr = this.colorRampList.find(
      (item) => item.name === colorRamp,
    ).ramp;
    mapLayer.minzoom = basedZoomOptions.zoomRange[0];
    mapLayer.maxzoom = basedZoomOptions.zoomRange[1];
    mapLayer.layout = layout;
    if (weightField) {
      const weightArr = [];
      weightArr.push(
        'interpolate',
        ['linear'],
        ['get', `${weightField}`],
        0,
        weight.range[0],
        maxFieldVal,
        weight.range[1],
      );
      mapLayer.paint = {
        'heatmap-weight': weightArr,
      };
    } else {
      mapLayer.paint = {
        'heatmap-weight': weight.value,
      };
    }
    Object.keys(paint).forEach((key) => {
      if (paint[key].mode === 'global') {
        Object.assign(mapLayer.paint, {
          [key]: paint[key].value,
        });
      } else {
        const expressArr = [];
        expressArr.push(
          'interpolate',
          ['linear'],
          ['zoom'],
          basedZoomOptions.zoomRange[0],
          paint[key].range[0],
          basedZoomOptions.zoomRange[1],
          paint[key].range[1],
        );
        Object.assign(mapLayer.paint, {
          [key]: expressArr,
        });
      }
    });

    Object.assign(mapLayer.paint, {
      'heatmap-color': [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0,
        'rgba(33,102,172,0)',
        0.2,
        colorRampArr[0],
        0.4,
        colorRampArr[1],
        0.6,
        colorRampArr[2],
        0.8,
        colorRampArr[3],
        1,
        colorRampArr[4],
      ],
    });
    return {
      status: 'success',
      message: '热力图层添加成功!',
      data: mapLayer,
    };
  }
}
export default Heatmap;
// const heatmap = new Heatmap('map')
// heatmap.test('Yellow-Orange-Red')
